<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="utf-8"%>  
<%@ include file="/WEB-INF/pages/mobile/common/meta.jsp" %>
<!DOCTYPE html>
<html lang="en"> 
    <head>  
		<title>listdemo页</title>
		<%@ include file="/WEB-INF/pages/mobile/common/script.jsp" %>
		<style type="text/css">
		
		.yui3-g [class*="yui3-u"] {
		    font-family: 微软雅黑;
		}
		/* 按钮样式start */
		.yui3-button {
		    margin:3px;
		}
		
		.warning{
		    background-color:#FAF55F;
		}
		
		.success{
		    background-color:#57A957;
		    color:white;
		}
		
		.error{
		    background-color:#C43C35;
		    color:white;
		}
		
		.notice{
		    background-color:#1B7AE0;
		    color:white;
		}
		
		.yui3-button-icon {
		    background-image: url("${ctx}/static/images/icon-sprite-dark-and-light-24.png");
		    background-repeat: no-repeat;
		    display: inline-block;
		    height: 20px;
		    vertical-align: middle;
		    width: 20px;
		}
		
		.yui3-button-icon-bold {
		    background-position: 1px 1px;
		}
		
		.yui3-button-icon-italic {
		    background-position: 1px -35px;
		}
		
		.yui3-button-icon-underline {
		    background-position: 1px -71px;
		}
		.nopadding{
			padding: 0;
		}
		/* 按钮样式end */
		</style>
    </head>  
  
    <body class="yui3-skin-sam">
    	<div id="test"></div>
    	<div class="yui3-g">
        <div class="yui3-u-1 ">

              <div class='yui3-u-1 article'>
                  <div class='yui3-g'>
                      <h3 class='yui3-u-1'>标题.</h3>
                      <img class='yui3-u' src="http://placehold.it/90x90">
                      <div class='yui3-u-2-3'>
                          <p>Donec aliquam interdum massa, ac vehicula augue pellentesque eget. Aenean tempor, felis id bibendum consectetur, purus urna ultricies orci.</p>
                      </div>
                  </div>
              </div>

               <h1 class='yui3-u-1 section-header'>Exclusives</h1>
               <div class='yui3-u-1 article'>
                   <img src="http://placehold.it/160x160">
                   <h4>John Smith</h4>
                   <h3>Nunc in ipsum nec massa?</h3>
               </div>
           </div>
        </div>
        <h4>Button Tags</h4>
		<button class='yui3-button'>&lt;button&gt;</button>
		<input type='button' class='yui3-button' value='&lt;input type="button"&gt;'>
		<input type='submit' class='yui3-button' value='&lt;input type="submit"&gt;'>
		
		<h4>Other Tags</h4>
		<div class='yui3-button'>&lt;div&gt;</div>
		<span class='yui3-button'>&lt;span&gt;</span>
		<a class='yui3-button'>&lt;a&gt;</a>
		
		<h4>Colors</h4>
		<button class='yui3-button success'>.success <br> #57A957</button>
		<button class='yui3-button warning'>.warning <br> #FAF55F</button>
		<button class='yui3-button error'>.error <br> #C43C35</button>
		<button class='yui3-button notice'>.notice <br> #1B7AE0</button>
		
		<h4>Icon Buttons</h4>
		<button class='yui3-button'>
		    <span class='yui3-button-icon yui3-button-icon-bold'></span>
		</button>
		
		<button class='yui3-button'>
		    <span class='yui3-button-icon yui3-button-icon-italic'></span>
		</button>
		
		<button class='yui3-button'>
		    <span class='yui3-button-icon yui3-button-icon-underline'></span>
		</button>
		
		<h4>Image Button</h4>
		<input type='image' id='imageButton' class='yui3-button nopadding' src="http://placehold.it/200x90"/>
    	<script type="text/javascript">
    		YUI().use("button", function(Y){
    			
    		});
		</script> 
    </body>  
</html>  